<template>
  <div id="background">
    <el-container>
      <el-header class="header" style="padding: 0">
        <!-- 头部的第一行 -->
        <div class="top" style="padding: 0;margin: 0">
          <div class="container">
            <div class="loginList">
              <p v-if="show">幸孕果欢迎您！</p>

              <p v-if="show">
                <router-link to="/login" v-text="loginText"></router-link>
                <router-link to="/register" class="register" v-text="regText"></router-link>
              </p>

            </div>
            <div class="typeList">
              <a href="/index">首页</a>
              <a href="###">我的订单</a>
              <router-link to="/cart">我的购物车</router-link>
              <a href="###">我的幸孕果</a>
              <a href="###">幸孕果会员</a>
              <a href="###">企业采购</a>
              <a href="###">关注幸孕果</a>
              <a href="###">合作招商</a>
              <a href="###">商家后台</a>
              <el-avatar icon="el-icon-user-solid" size="small" src="" v-if="show1"></el-avatar>
              <el-dropdown v-if="show1">
                <span class="el-dropdown-link"><i class="el-icon-arrow-down el-icon--right"></i></span>
                <el-dropdown-menu slot="dropdown" router collapse-transition>
                  <el-dropdown-item command="a" @click="details()">
                    <router-link to="/admin/adminDetails"><i class="el-icon-setting" style="font-style: normal">&nbsp;&nbsp;个人中心</i></router-link>
                  </el-dropdown-item>
                  <el-dropdown-item command="c">
                    <span @click="logout()"><i class="el-icon-switch-button"></i> 退出登录</span>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>

          </div>
        </div>
        <!--头部第二行 搜索区域-->
        <div class="bottom">
          <h1 class="logoArea" style="margin: 5px">
            <router-link class="logo" title="尚品汇" to="/home" style="" >
              <img src="../../imgs/logo.png" alt="" style="width: 300px;height: 100px;margin: 3px;">
            </router-link>
          </h1>
          <div class="searchArea">
            <form action="###" class="searchForm">
              <input type="text" id="autocomplete" v-model="keyword" class="input-error input-xxlarge" />
              <button class="sui-btn btn-xlarge btn-danger" type="button" @click="search">搜索</button>
            </form>
          </div>
        </div>


      </el-header>
      <el-main >
        <div style="background-color: white">

          <el-container style="height: 800px; border: 1px solid #eee;">

            <el-aside width="200px" style="margin-top: 1%" >
              <div style="width: 190px;background-color: white;padding: 5px;margin: auto">
                <img v-model="user.photo" v-bind:src="user.photo" width="150px" height="150px" style="border-radius: 300px;margin-left: 8%">
                <br>
                <br>
                <p style="margin:0 auto;text-align: center" v-model="user.username">{{user.username}}</p>
              </div>

              <br>
              <br>
              <el-menu :default-openeds="['1','2']"
                       :default-active="activeIndex">
                <el-submenu index="1">
                  <template slot="title"><i class="el-icon-message"></i>用户中心</template>
                  <el-menu-item-group>
                    <router-link class="alink" to="/spaceinfo"><el-menu-item index="1-1">个人信息</el-menu-item></router-link>
                    <router-link class="alink" to="/changeinfo"><el-menu-item index="1-3">修改信息</el-menu-item></router-link>
                  </el-menu-item-group>
                </el-submenu>
              </el-menu>
            </el-aside>
            <el-container style="background-color: white">
              <el-main>
                <router-view/>
              </el-main>
            </el-container>

          </el-container>
        </div>

      </el-main>
      <!--页面底部-->
      <div style="height: 95px;background-image: url('../../imgs/fotter.jpg')"></div>
      <el-footer style="padding: 0">
        <div class="footer">
          <div class="footer-container">
            <div class="footerList">
              <div class="footerItem">
                <h4>购物指南</h4>
                <ul class="footerItemCon">
                  <li>购物流程</li>
                  <li>会员介绍</li>
                  <li>生活旅行/团购</li>
                  <li>常见问题</li>
                  <li>购物指南</li>
                </ul>
              </div>
              <div class="footerItem">
                <h4>配送方式</h4>
                <ul class="footerItemCon">
                  <li>上门自提</li>
                  <li>211限时达</li>
                  <li>配送服务查询</li>
                  <li>配送费收取标准</li>
                  <li>海外配送</li>
                </ul>
              </div>
              <div class="footerItem">
                <h4>支付方式</h4>
                <ul class="footerItemCon">
                  <li>货到付款</li>
                  <li>在线支付</li>
                  <li>分期付款</li>
                  <li>邮局汇款</li>
                  <li>公司转账</li>
                </ul>
              </div>
              <div class="footerItem">
                <h4>售后服务</h4>
                <ul class="footerItemCon">
                  <li>售后政策</li>
                  <li>价格保护</li>
                  <li>退款说明</li>
                  <li>返修/退换货</li>
                  <li>取消订单</li>
                </ul>
              </div>
              <div class="footerItem">
                <h4>特色服务</h4>
                <ul class="footerItemCon">
                  <li>夺宝岛</li>
                  <li>DIY装机</li>
                  <li>延保服务</li>
                </ul>
              </div>
              <div class="footerItem">
                <h4>帮助中心</h4>
                <img src="">
              </div>
            </div>
            <div class="copyright">
              <ul class="helpLink">
                <li>关于我们
                  <span class="space"></span>
                </li>
                <li>联系我们
                  <span class="space"></span>
                </li>
                <li>关于我们
                  <span class="space"></span>
                </li>
                <li>商家入驻
                  <span class="space"></span>
                </li>
                <li>营销中心
                  <span class="space"></span>
                </li>
                <li>友情链接
                  <span class="space"></span>
                </li>
                <li>关于我们
                  <span class="space"></span>
                </li>
                <li>营销中心
                  <span class="space"></span>
                </li>
                <li>友情链接
                  <span class="space"></span>
                </li>
                <li>关于我们</li>
              </ul>
              <p>地址：山西省太原市小店区</p>
              <p>晋ICP备123456789号</p>
            </div>
          </div>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>
<script>


export default {
  data: function () {
    return {
      isShow: true,
      activeIndex:"1-1",
      id:"",
      categoryArr:[],
      classArr:[],
      loginText:"请登录",
      regText:"免费注册",
      show:true,
      show1:false,
      keyword:"",
      user:{}
    }
  },
  methods: {
    islogin(){
      let jwt = localStorage.getItem('jwt');
      console.log(jwt);
      if (!jwt) {
        this.show=true;
        this.show1=false;
      }else {
        this.show=false;
        this.show1=true;
        const decode = this.jwt_decode(jwt);
        console.log(decode.id);

        this.id=decode.id;
        let url = "http://localhost:8091/user/"+this.id;
        console.log(url);
        this.axios
            .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
            .get(url).then((response) => {
          console.log(response);
          let responseBody = response.data;
          console.log(responseBody);
          this.user = responseBody.data;
          console.log("数据1111112222222");
          console.log(this.user);
        });
      }
    },
    logout(){
      localStorage.removeItem('jwt');
      location.reload();
    },
    cleanPath(){
      this.Refresh();
    },
    Refresh() {
      this.reload()
      WorkorderStateReport().then((res) => {
        this.loading = true;
        if (res.data.length > 0) {
          this.list = res.data;
        }
      });
    },
    reload () {//局部刷新
      this.isShow = false;
      this.$nextTick(() => {
        this.isShow = true
      })
    },
    search(){},
    handleSelect(key, keyPath) {
      this.update();
      console.log(key, keyPath);
    },
    loadCategoryList(){
      console.log('loallist..')
      let url = "http://localhost:8090/category";
      console.log("url="+url);
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) =>{
        console.log(response);
        let responseBody = response.data;
        console.log(responseBody);
        this.categoryArr = responseBody.data;
        console.log("数据返回传功")
        console.log(this.categoryArr)
      });
    },
    loadClassList(){
      console.log('loallist..')
      let url = "http://localhost:8090/class/listBySupId";
      console.log("url="+url);
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) =>{
        console.log(response);
        let responseBody = response.data;
        console.log(responseBody);
        this.classArr = responseBody.data;
        console.log("数据返回传功2222")
        console.log(this.classArr)
      });
    }
  },
  mounted() {
    console.log("mounted..")
    this.$router.push("/spaceinfo")
    this.islogin();
  }
}
</script>
<!--背景图片-->
<style scoped>
.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
.alink{

  text-decoration: none;
}
</style>

<style>
#background{
  background: url("../../imgs/12.jpg") no-repeat  ;
  background-size: 100% 100%;

}
</style>
<!--顶部导航-->
<style lang="less" scoped>
.header {
  &>.top {
    background-color: #eaeaea;
    height: 45px;
    line-height: 45px;

    .container {
      width: 1200px;
      margin: 0 auto;
      overflow: hidden;

      .loginList {
        float: left;

        p {
          float: left;
          margin-right: 10px;

          .register {
            border-left: 1px solid #b3aeae;
            padding: 0 5px;
            margin-left: 5px;
          }
        }
      }

      .typeList {
        float: right;
        a {
          padding: 0 10px;

          &+a {
            border-left: 1px solid #b3aeae;
          }
        }

      }

    }
  }

  &>.bottom {
    width: 1200px;
    margin: 0 auto;
    overflow: hidden;

    .logoArea {
      float: left;

      .logo {
        img {
          width: 175px;
          margin: 25px 45px;
        }
      }
    }

    .searchArea {
      float: right;
      margin-top: 35px;

      .searchForm {
        overflow: hidden;

        input {
          box-sizing: border-box;
          width: 490px;
          height: 32px;
          padding: 0px 4px;
          border: 2px solid #ea4a36;
          float: left;

          &:focus {
            outline: none;
          }
        }

        button {
          height: 32px;
          width: 68px;
          background-color: #ea4a36;
          border: none;
          color: #fff;
          float: left;
          cursor: pointer;

          &:focus {
            outline: none;
          }
        }
      }
    }
  }
}
</style>
<!--搜索框-->
<style lang="less" scoped>
.type-nav {
  border-bottom: 2px solid #e1251b;

  .container {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    position: relative;

    .all {
      width: 210px;
      height: 45px;
      background-color: #e1251b;
      line-height: 45px;
      text-align: center;
      color: #fff;
      font-size: 14px;
      font-weight: bold;
    }

    .nav {
      a {
        height: 45px;
        margin: 0 22px;
        line-height: 45px;
        font-size: 16px;
        color: #333;
      }
    }

    .sort {
      position: absolute;
      left: 0;
      top: 45px;
      width: 210px;
      height: 461px;
      position: absolute;
      background: #fafafa;
      z-index: 999;

      .all-sort-list2 {
        .item {
          &:hover{
            background-color: gainsboro;
            cursor: pointer;
          }
          h3 {
            line-height: 30px;
            font-size: 14px;
            font-weight: 400;
            overflow: hidden;
            padding: 0 20px;
            margin: 0;

            a {
              color: #333;
            }
          }

          .item-list {
            display: none;
            position: absolute;
            width: 734px;
            min-height: 460px;
            background: #f7f7f7;
            left: 210px;
            border: 1px solid #ddd;
            top: 0;
            z-index: 9999 !important;

            .subitem {
              float: left;
              width: 650px;
              padding: 0 4px 0 8px;

              dl {
                border-top: 1px solid #eee;
                padding: 6px 0;
                overflow: hidden;
                zoom: 1;

                &.fore {
                  border-top: 0;
                }

                dt {
                  float: left;
                  width: 54px;
                  line-height: 22px;
                  text-align: right;
                  padding: 3px 6px 0 0;
                  font-weight: 700;
                }

                dd {
                  float: left;
                  width: 415px;
                  padding: 3px 0 0;
                  overflow: hidden;

                  em {
                    float: left;
                    height: 14px;
                    line-height: 14px;
                    padding: 0 8px;
                    margin-top: 5px;
                    border-left: 1px solid #ccc;
                  }
                }
              }
            }
          }

          &:hover {
            .item-list {
              display: block;
            }
          }
        }
      }
    }
  }
}
</style>
<!--中部导航栏-->
<style lang="less" scoped>
.footer {
  background-color: #eaeaea;

  .footer-container {
    width: 1200px;
    margin: 0 auto;
    padding: 0 15px;

    .footerList {
      padding: 20px;
      border-bottom: 1px solid #e4e1e1;
      border-top: 1px solid #e4e1e1;
      overflow: hidden;
      padding-left: 40px;

      .footerItem {
        width: 16.6666667%;
        float: left;

        h4 {
          font-size: 14px;
        }

        .footerItemCon {
          li {
            line-height: 18px;
          }
        }

        &:last-child img {
          width: 121px;
        }
      }
    }

    .copyright {
      padding: 20px;

      .helpLink {
        text-align: center;

        li {
          display: inline;

          .space {
            border-left: 1px solid #666;
            width: 1px;
            height: 13px;
            background: #666;
            margin: 8px 10px;
          }
        }
      }

      p {
        margin: 10px 0;
        text-align: center;
      }
    }
  }
}
</style>
<!--
-->
